<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'Home',
})

// 图片都是 600 * 400的，转换成手机屏幕的宽，得到对应的高
const height = uni.getWindowInfo().windowWidth * (400 / 600)

function toLogin() {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}

// 定义grid图标数据
interface GridItem {
  icon: string
  text: string
  color?: string
  spanClass?: string // 添加可选的spanClass字段，用于存储特殊的类名
}

const gridItems: GridItem[] = [
  {
    icon: 'list',
    text: '水库',
    spanClass: 'row-span-2', // 水库项占2行高度
  },
  {
    icon: 'list',
    text: '水位',
  },
  {
    icon: 'list',
    text: '雨量',
  },
  {
    icon: 'list',
    text: '图像',
  },
  {
    icon: 'list',
    text: '状态',
  },
  {
    icon: 'list',
    text: '联系我们',
  },
  {
    icon: 'list',
    text: '安装调试',
    color: 'bg-amber-500',
    spanClass: 'col-span-2', // 安装调试项占2列宽度
  },
]

function handleClick(item: GridItem) {
  console.log(item)
  uni.navigateTo({
    url: '/pages/data/index',
  })
}
</script>

<template>
  <view class="bg-white">
    <swiper :style="{ height: `${height}px` }" indicator-dots indicator-color="white" indicator-active-color="green" autoplay circular>
      <swiper-item>
        <image src="/static/home/banner1.jpg" class="h-full w-full" />
      </swiper-item>
      <swiper-item>
        <image src="/static/home/banner2.jpg" class="h-full w-full" />
      </swiper-item>
      <swiper-item>
        <image src="/static/home/banner3.jpg" class="h-full w-full" />
      </swiper-item>
      <swiper-item>
        <image src="/static/home/banner4.jpg" class="h-full w-full" />
      </swiper-item>
    </swiper>

    <!-- 九宫格布局，使用v-for循环渲染 -->
    <view class="p-2">
      <view class="grid grid-cols-3 gap-2">
        <!-- 使用v-for循环渲染所有网格项 -->
        <view
          v-for="(item, index) in gridItems"
          :key="index"
          class="flex flex-col cursor-pointer items-center justify-center rounded-md p-4 shadow-md"
          :class="[item.spanClass, item.spanClass ? 'bg-amber-500' : 'bg-blue-600']"
          @click="handleClick(item)"
        >
          <view
            class="mb-2 h-8 w-8 flex items-center justify-center text-2xl text-white"
          >
            <wd-icon :name="item.icon" size="20" />
          </view>
          <text class="text-sm text-white">{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
